<template>
	<div>
		<Banner :propsbanner="bannerList" ></Banner>
		<Icons></Icons>
		<Gengduo :propsgengduo="gengduoList" ></Gengduo>
		<Scroll></Scroll>
		<Centericons></Centericons>
		<Splike :propspike="SplikeList" ></Splike>
		<Category :propscategory="categoryList" :prop_ppp="ppp" ></Category>
		<!-- 底部菜单 -->
		<BottomNav :prop="bol" ></BottomNav>
		<Travel></Travel>
	</div>
</template>

<script>
	// 引入Banner组件
	import Banner from './pages/Banner.vue';
	// 引入Icons组件
	import Icons from './pages/Icons.vue';
	// 引入Gengduo组件
	import Gengduo from './pages/Gengduo.vue';
	// 引入Scroll组件
	import Scroll from './pages/Scroll.vue';
	// 引入Center-iCons组件
	import Centericons from './pages/Centericons.vue';
	// 引入Splike组件
	import Splike from './pages/Splike.vue';
	// 引入Category组件
	import Category from './pages/Category.vue';
	// 引入公共组件-底部
	import BottomNav from '../default/BottomNav.vue';
	// 引入Travel组件
	import Travel from './pages/Travel.vue';
	// 引入函数
	import {mapState} from 'vuex';
	export default{
		name : 'Home',
		data(){
			return {
				bol : 1,
				bannerList : [],
				SplikeList : [],
				gengduoList : [],
				categoryList : [],
				ppp : {}
				
				
			}
		},
		computed : {
			...mapState(['cityName'])
		},
		// 组件列表的调用
		components : {
			Banner,
			Icons,
			Gengduo,
			Scroll,
			Centericons,
			Splike,
			Category,
			BottomNav,
			Travel
		},
		// create: 当前组件创建之后[el挂载之前(标签未渲染),data函数已经完成了初始化]
		// 父组件需要将请求的数据给到子组件的话,满足: 1.data函数已经初始化; 2.响应数据传给子组件(组件已渲染)
		// mounted: 组件挂载之后[如果接口复杂/多个接口的时候,优先考虑mounted]
		created(){
			// 备份
			let that = this;
			// 向dataHome.json文件发起异步请求
			this.axios.get('/api/dataHome.json').then( (res)=>{
				// console.log(res.data.Homemsg);
				let data = res.data.Homemsg[0];
				for( let index in res.data.Homemsg ){
					if( res.data.Homemsg[index].city == this.cityName ){
						data = res.data.Homemsg[index];
					}
				}
				// 提取banner组件的数据
				that.bannerList = data.BannerVueList;
				// 提取splike组件的数据
				that.SplikeList = data.SplikeVueList;
				// 提取gengduo组件的数据
				that.gengduoList = data.TabsList;
				// 提取category组件的数据
				that.categoryList = data.tabs;
				that.ppp = data.categoryVueList;
				// console.log(res.data.Homemsg[0].categoryVueList);
				// console.log(data.categoryVueList);
				// console.log(data.SplikeVueList.spike_List);
				// console.log( that.SplikeList );
				
			} ).catch( (error)=>{
				console.log( error );
			} )
		}
	}
</script>

<style>
</style>
